<template>
  <div class="my-footer">
    <div class="o-link">
      <!-- <ul>
        <li v-for="item in mylink" :key="item.id">
          <a :href="item.link">{{item.name}}</a>
        </li>
      </ul> -->
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content">
            <div class="class-content" style="margin-bottom: 8px">关于我们</div>
            <ul class="nav-content">
              <li v-for="item in mylink" :key="item.id">
                <a :href="item.link">{{ item.name }}</a>
              </li>
            </ul>
          </div></el-col
        >
        <el-col :span="12"
          ><div class="grid-content">
            <el-card style="margin-top: 0; padding: 0; width: 450px">
              <baidu-map
                @ready="handler"
                style="height: 240px; margin-top: 10px; margin: 0; padding: 0"
              ></baidu-map>
            </el-card></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content">
            <div class="class-content" style="margin-bottom: 8px">联系我们</div>
            <ul class="contact-list">
              <li>
                <div class="contact-img">
                  <img
                    src="../../assets/HomeResource/contact_icon/QQ_0.png"
                    alt="bottom image"
                  /><img
                    src="../../assets/HomeResource/contact_icon/QQ.png"
                    alt="top image"
                  />
                </div>
                <div class="QR-code">
                  <img
                    src="../../assets/HomeResource/contact_icon/QR-code.png"
                  />
                </div>
              </li>
              <li>
                <div class="contact-img">
                  <img
                    src="../../assets/HomeResource/contact_icon/weixin_0.png"
                    alt="bottom image"
                  /><img
                    src="../../assets/HomeResource/contact_icon/weixin.png"
                    alt="top image"
                  />
                </div>
                <div class="QR-code">
                  <img
                    src="../../assets/HomeResource/contact_icon/QR-code.png"
                  />
                </div>
              </li>
              <li>
                <div class="contact-img" onclick="window.open('https://weibo.com/u/3089852951?is_all=1')">
                  <img
                    src="../../assets/HomeResource/contact_icon/weibo_0.png"
                    alt="bottom image"
                  /><img
                    src="../../assets/HomeResource/contact_icon/weibo.png"
                    alt="top image"
                  />
                </div>
              </li>
              <li>
                <a href="mailto:Lqm394@126.com">
                <div class="contact-img">
                  <img
                    src="../../assets/HomeResource/contact_icon/youxiang_0.png"
                    alt="bottom image"
                  /><img
                    src="../../assets/HomeResource/contact_icon/youxiang.png"
                    alt="top image"
                  />
                </div>
                </a>
              </li>
            </ul></div
        ></el-col>
      </el-row>
    </div>
    <div style="height: 350px;"> </div>
  </div>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {
      mylink: [
        { id: 1, name: "首页", link: "/#navi/home" },
        { id: 2, name: "成员", link: "#/navi/member" },
        { id: 3, name: "论文", link: "#/navi/paper" },
        { id: 4, name: "照片集", link: "#/navi/album" },
        { id: 5, name: "联系方式", link: "#/navi/contact" },
        { id: 6, name: "欢迎界面", link: "#/entry" },
      ],
    };
  },
  methods: {
    handler({ BMap, map }) {
      var point = new BMap.Point(106.473039, 29.570672);
      map.centerAndZoom(point, 16);
      var marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.class-content {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "微软雅黑";
  font-size: 22px;
  font-weight: bolder;
  color: #535353c9;
}
// 联系我们样式
.contact-list {
  position: relative;
  list-style: none;
  li {
    float: left;
    .contact-img {
      position: relative;
      margin-left: 75px;
      img {
        width: 55px;
        height: 55px;
        opacity: 1;
        transition: all 0.3s ease;
      }
      img:last-child {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 10;
        transition: all 0.3s ease;
      }
    }
    .contact-img:hover img {
      opacity: 0;
    }
    .contact-img:hover img:last-child {
      opacity: 1;
    }
    .QR-code {
      display: none;
      position: absolute;
      top: 0;
      left: 80%;
      img {
        width: 200px;
        height: 200px;
      }
    }
    .contact-img:hover + .QR-code {
      display: block;
    }
  }
}

.my-footer {
  display: block;
  width: 900px;
  margin: 0 auto;
  font-size: 14px;
  color: #222;
  text-align: center;
  padding-top: 10vh;
  .o-link {
    margin: 0 auto;
    height: 30px;
    line-height: 30px;
    .el-row {
      margin-bottom: 20px;
      text-align: center;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 8px;
      padding-left: 0;
      margin-left: 0;
      text-align: center;
      .nav-content {
        line-height: 40px;
        li {
          list-style: none;
          font-family: "宋体";
          font-size: 14px;
          font-weight: bold;
          color: #979797;
          a {
            text-decoration: none;
            color: rgb(102, 102, 102);
          }
          a:hover {
            color: rgb(14, 158, 158);
          }
        }
      }
    }
  }
  .bg-purple {
    background: #ffffff;
  }
  .grid-content {
    border-radius: 20px;
    min-height: 50px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .tt-email {
    margin: 8px 0 30px 0;
  }
}
</style>
